<template>
	<div class="all">
		<div class="flex flexc flexb" style="flex-wrap: wrap; height: 90vh;" v-if="shexiangshi == 1">
			<div style="width: 100%; ">
				<div class="wei">您还没有注册摄影师</div>
				<div class="btn" @click="go('/zhuce')">前往注册</div>
			</div>
		</div>
		<div v-if="shexiangshi == 2">
			<div class="top">
				<div class="flex">
					<div style="margin-right: 0.2rem;"><img :src="person.head_img" style=" width: 1.2rem; height: 1.2rem; border-radius: 0.6rem;"></div>
					<div class="flex flexc" style="flex-wrap: wrap;">
						<div style="color: #2D3038; width: 100%; font-size: 0.32rem;">{{person.name}}</div>
						<div style="color: #A0A0A0; font-size: 0.26rem;">{{person.autograph}}</div>
					</div>
				</div>
				<div class="flex flexb" style="padding: 0.3rem 0 0.1rem;">
					<div class="tli">
						<div style="color: #2D3038; font-size: 0.4rem; margin-bottom: 0.1rem;">{{num.count}}</div>
						<div style="color: #A0A0A0; font-size: 0.26rem;">我上传的</div>
					</div>
					<div class="tli">
						<div style="color: #2D3038; font-size: 0.4rem; margin-bottom: 0.1rem;">{{num.reward}}</div>
						<div style="color: #A0A0A0; font-size: 0.26rem;">打赏我的</div>
					</div>
					<div class="tli">
						<div style="color: #2D3038; font-size: 0.4rem; margin-bottom: 0.1rem;">{{num.collection}}</div>
						<div style="color: #A0A0A0; font-size: 0.26rem;">收藏我的</div>
					</div>
					<div class="tli">
						<div style="color: #2D3038; font-size: 0.4rem; margin-bottom: 0.1rem;">{{num.like}}</div>
						<div style="color: #A0A0A0; font-size: 0.26rem;">点赞我的</div>
					</div>
				</div>
			</div>
			<div class="top" style="padding: 0.6rem 0.3rem;">
				<div class="flex flexb" style="margin-bottom: 0.6rem;" @click="go('/zhaopianlist2')">
					<div class="flex">
						<div><img src="../../static/img/wodezhaopian.png" style="width: 0.36rem; margin-right: 0.3rem;"></div>
						<div style="line-height: 0.36rem; color: #2D3038; font-size: 0.28rem;">我的照片</div>
					</div>
					<div style="line-height: 0.36rem; color: #DADADA; font-size: 0.36rem;">></div>
				</div>
				<div class="flex flexb" style="margin-bottom: 0.6rem;" @click="go('/tixian')">
					<div class="flex">
						<div><img src="../../static/img/wodezhanghu.png" style="width: 0.36rem; margin-right: 0.3rem;"></div>
						<div style="line-height: 0.36rem; color: #2D3038; font-size: 0.28rem;">我的账户</div>
					</div>
					<div style="line-height: 0.36rem; color: #DADADA; font-size: 0.36rem;">></div>
				</div>
				<div class="flex flexb" style="margin-bottom: 0.6rem;" @click="go('/list')">
					<div class="flex">
						<div><img src="../../static/img/saishipaishe.png" style="width: 0.36rem; margin-right: 0.3rem;"></div>
						<div style="line-height: 0.36rem; color: #2D3038; font-size: 0.28rem;">赛事拍摄报名</div>
					</div>
					<div style="line-height: 0.36rem; color: #DADADA; font-size: 0.36rem;">></div>
				</div>
				<div class="flex flexb" @click="go('/zhaopianlist')">
					<div class="flex">
						<div><img src="../../static/img/wodebaoming.png" style="width: 0.36rem; margin-right: 0.3rem;"></div>
						<div style="line-height: 0.36rem; color: #2D3038; font-size: 0.28rem;">我的报名</div>
					</div>
					<div style="line-height: 0.36rem; color: #DADADA; font-size: 0.36rem;">></div>
				</div>
			</div>
		</div>
		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'index',
		data() {
			return {
				shexiangshi: 0,
				ing: true,
				person:"",
				num:""
			}
		},
		watch: {

		},
		computed: {

		},
		created() {
      console.log(this.urls)
			this.shenfen()
			this.getnum()
		},
		methods: {
			go:function(url){
				this.$router.push(url)
			},
			//验证登录
			// login:async function() {
			// 	var that = this
			// 	await axios.get('/api/auth/me').then((response) => {
			// 		if (response.data.msg.code == 0) {
			// 			// this.person = JSON.parse(response.data.data.data)
			// 		}else{
			// 			this.$toast(response.data.message);
			// 		}
			// 	})
			// },
			//验证身份
			shenfen:async function() {
				var that = this
				await axios.get(this.urls+'/photographer/check').then((response) => {
					if (response.data.msg.code == 0) {
						if(response.data.data){
							this.person = response.data.data
							this.shexiangshi = 2
						}else{
							this.shexiangshi = 1
						}
						this.ing = false
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			//获取4个数
			getnum:async function() {
				var that = this
				await axios.get(this.urls+'/photographer/my_photo_reward').then((response) => {
					if (response.data.msg.code == 0) {
						this.num = response.data.data
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},


			//跳转
			go: function(url, canshu) {
				this.$router.push({
					path: url,
					query: {
						canshu: canshu
					}
				})
			}
		},

	}
</script>

<style scoped lang="less">
	.van-popup {
		background: transparent;
	}

	.van-loading__text {
		color: #FFFFFF;
	}

	.all {
		.van-loading {
			width: 100%;
		}

		.top {
			background: #FFFFFF;
			padding: 0.3rem;
			border-radius: 0.1rem;
			box-shadow: 2px 2px 5px #999;
			margin-bottom: 0.3rem;

			.tli {
				text-align: center;
			}
		}

		.wei {
			font-size: 0.5rem;
			margin-bottom: 1rem;
			width: 100%;
			text-align: center;
			color: #999;
			text-shadow: 1px 1px 2px #333;
		}

		.btn {
			background: #66A7FF;
			color: #FFFFFF;
			font-size: 0.3rem;
			text-align: center;
			width: 3rem;
			box-shadow: 2px 2px 5px #666;
			margin: 0 auto;
			border-radius: 0.05rem;
		}

		.meiyou {
			width: 6.7rem;
			height: 2.8rem;
			background: #FFFFFF;
			border-radius: 0.24rem;
			justify-content: center;

			.tu {
				img {
					width: 0.4rem;
					margin-right: 0.1rem;
					position: relative;
					top: 0.03rem;
				}
			}

			.bt {
				font-size: 0.32rem;
				font-weight: bold;
			}
		}

		.tongzhi {
			width: 6.5rem;
			border-radius: 0.1rem;
			opacity: 0.9;
			font-size: 0.28rem;

			.ico {
				font-size: 0.28rem;
			}

			.tli {
				background: #FFB300;
				text-align: center;
				border-radius: 0.1rem;
				opacity: 0.6;
				width: 2.75rem;
				height: 1.4rem;
				padding: 0.2rem 0;
				flex-wrap: wrap;
				margin-bottom: 0.2rem;

				.czli {
					width: 100%;
				}
			}

			.tliact {
				opacity: 1;
			}

			.talt {
				font-size: 0.24rem;
				color: #93959B;
				padding: 0.2rem 0.4rem;
			}

			.tname {
				line-height: 0.95rem;
				border-bottom: 1px #EAEAEA solid;
				font-size: 0.32rem;
				color: #2D3038;
				text-align: center;
				font-weight: bold;
			}

			.tcon {
				padding: 0.2rem 0.4rem 0.4rem;
				line-height: 0.48rem;
				flex-wrap: wrap;
			}

			.tbon {
				border-top: 1px #EAEAEA solid;
			}

			.cli {
				flex: 1;
				text-align: center;
				font-size: 0.28rem;
				line-height: 0.75rem;
				margin: 0.1rem 0;
			}
		}

		.feiyong {
			padding: 0.3rem 0.1rem;
		}

		.yincang {
			border-top: 1px #EAEAEA solid;
			border-bottom: 1px #EAEAEA solid;
			font-size: 0.28rem;
			padding: 0.3rem 0.4rem;
		}

		.kb {
			line-height: 0.8rem;
			background: #F2F6F9;
			color: #B6BECC;
			font-size: 0.24rem;
			justify-content: center;
		}

		.ka {
			border-radius: 0.24rem;
			background: #FFFFFF;
			padding: 0.1rem 0 0;
			overflow: hidden;

			.ktop {
				padding: 0.2rem 0.4rem;
				border-bottom: 1px #EAEAEA solid;
			}

			.tu {
				img {
					width: 0.34rem;
					margin-right: 0.1rem;
				}
			}

			.kname {
				font-size: 0.36rem;
				font-weight: bold;
				margin-right: 0.2rem;
			}

			.krenzheng {
				font-size: 0.24rem;
				color: #41CC8B;
			}

			.kzhuangtai {
				font-size: 0.28rem;
			}

			.kcon {
				padding: 0 0.4rem 0.4rem;

				.kli {
					margin-top: 0.3rem;
					font-size: 0.28rem;
				}

				.k1 {}

				.k11 {
					width: 1.3rem;
					font-size: 0.28rem;
					color: #93959B;
				}

				.k12 {
					font-size: 0.28rem;
					color: #2D3038;
				}

				.k2 {
					text-align: right;
					font-size: 0.28rem;
				}
			}
		}

		.biaoti {
			align-items: center;
			margin: 0.4rem 0;
			padding: 0 0.1rem;

			.tu {
				display: flex;
				align-items: center;
				text-align: center;

				img {
					width: 0.4rem;
					margin-right: 0.1rem;
					position: relative;
					top: 0.01rem;
				}
			}

			.bt {
				color: #2D3038;
				font-size: 0.32rem;
			}
		}

		.name {
			div {
				line-height: 0.5rem;
			}
		}

		.tx {
			img {
				width: 1rem;
				height: 1rem;
				border-radius: 0.1rem;
			}
		}

		.qian {
			border-radius: 0.24rem;
			width: 6.7rem;
			height: 2.57rem;
			padding: 0.4rem;
			background: #3154FF;

			.f1 {
				font-size: 12px;
			}

			.y1 {
				font-size: 0.28rem;
			}

			.y2 {
				font-size: 0.48rem;
				font-weight: bold;
				padding: 0.2rem 0 0.3rem;
			}

			.y3 {
				padding: 0.15rem 0.3rem;
				// line-height: 0.6rem;
				border-radius: 0.3rem;
				text-align: center;
				background: #FFB300;
			}
		}

		.shezhi {
			background: #FFFFFF;
			margin-top: 0.38rem;
			border-radius: 0.24rem;
			padding: 0.3rem 0;

			.li {
				flex: 1;
				text-align: center;

				.tu {
					font-size: 12px;
					margin-bottom: 0.2rem;

					img {
						width: 0.48rem;
						height: 0.48rem;
					}
				}

				.name {
					font-size: 0.24rem;
					color: #2D3038;
				}
			}
		}
	}
</style>
